<template>
	<view class="container">
			<AppNavigation>
				<RealtimeNotice ></RealtimeNotice>
			</AppNavigation>
			<!-- 若用户没有进行认证，则弹出此提醒 -->
			<UncompletedWarn v-if="!taskCompleted">未完成用户登录任务，无法为你匹配出行伙伴。</UncompletedWarn>	
			<template v-else>
				<AssistBlind v-if="role === Role.ROLE_BLIND"></AssistBlind>
				<AssistVolunteer v-if="role === Role.ROLE_VOLUNTEER"></AssistVolunteer>
			</template>
	</view>
</template>

<script>
	import UncompletedWarn from "@/components/UncompletedWarn/UncompletedWarn.vue"
	import RealtimeNotice from "@/components/RealtimeNotice/RealtimeNotice.vue"
	import AppNavigation from "@/components/AppNavigation/AppNavigation.vue"
	import AssistNews from "./components/AssistNews.vue"
	import AssistBlind from "./components/AssistBlind.vue"
	import AssistVolunteer from "./components/AssistVolunteer.vue"
	import * as Role from "@/core/constant/role.js"
	import {checkTaskCompleted} from "@/core/app.js"
	import {isEmpty} from "@/utils/util.js"
	import {checkRole} from "@/core/app.js"
	
	export default {
		data() {
			return {
				// 判断显示志愿者端组件还是盲人端组件
				role:Role.ROLE_UNDEFINED,			
				Role,
				taskCompleted:false,
			}		
		},
		components:{
			UncompletedWarn,
			AssistBlind,
			AssistVolunteer,
			RealtimeNotice
		},
		methods: {
			
		},
		onShow(){
			this.role = checkRole()
			this.taskCompleted = checkTaskCompleted()
		},
		onHide(){
			console.log("XZHU.vue OnHide")
		}
		
	}
</script>

<style lang="scss" >
	page{
		background-color: #FFFFFF;
		width:100vw;
		height:100vh;
		
	}
	.container{
		background-color: #FFFFFF;
		display: flex;
		flex-direction: column;
		position:relative;
		width: 600rpx;
		height:100vh;
		margin: auto;
		overflow-y:scroll;
		overflow-x:visible;
		
		.Row4{
			width: 100%;
			height: 59px;
			border-radius: 20px 20px 0 0;
			border-width: 1px 0px 0px 0px;
			border-style: solid;
			border-color: rgba(0, 0, 0, 1);
			display: flex;
			justify-content: space-evenly;
			align-items: center;
			text{
				// 上右下左
				width: 172px;
				height: 16px;
				font-size: 12px;
				font-weight: 400;
				letter-spacing: 0px;
				line-height: 17.38px;
				color: rgba(0, 0, 0, 1);
			}
			image{
				width: 24px;
				height: 24px;
			}
		}
		
		
		//点击志愿者后显示的详细的弹窗
		.mask{
			position: fixed;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			z-index: 1;
			//背景模糊
			backdrop-filter: blur(2px);
			.mask-con {
				position: fixed;
				top: 122px;
				bottom: 0;
				left: 47px;
				right: 0;
				z-index: 1;
				width: 290px;
				height: 457px;
				display: flex;
				flex-direction: column;
				justify-content: flex-start;
				align-items: center;
				.info{
					width: 100%;
					height: 100%;
					.info-one{
						height: 400rpx;
						border-radius: 0px 10px 10px 10px;
						background: rgba(255, 255, 255, 1);
						border: 1px solid rgba(0, 0, 0, 1);
						.top{
							width: 490rpx;
							height: 180rpx;
							display: flex;
							justify-content: space-between;
							margin: 30rpx 30rpx 0 30rpx;
							.left{
								display: flex;
								flex-direction: column;
								.left_name,.left_profile,.left_age,.left_career,.left_num{
									margin-top: 13rpx;
								}
								.left_name{
									font-size: 40rpx;
									font-weight: 700;
									letter-spacing: 0rpx;
									line-height: 40rpx;
									color: rgba(33, 37, 41, 1);
								}
								.left_profile{
									font-size: 25rpx;
									font-weight: 400;
									letter-spacing: 0px;
									line-height: 25rpx;
									color: rgba(134, 142, 150, 1);
								}
								.left_age,.left_career{
									font-size: 25rpx;
									font-weight: 400;
									letter-spacing: 0px;
									line-height: 25rpx;
									color: rgba(33, 37, 41, 0.7);
									margin-right: 5rpx;
								}
								.left_num{
									font-size: 20rpx;
									font-weight: 300;
									letter-spacing: 0px;
									line-height: 20rpx;
									color: rgba(33, 37, 41, 0.6);
								}
							}
							image{
								width: 80rpx;
								height: 80rpx;
								margin-top: 40rpx;
							}
						}
						.middle{
							width: 490rpx;
							height: 90rpx;
							display: flex;
							justify-content: space-evenly;
							margin: 10rpx 30rpx 0 30rpx;
							.code{
								height: 70rpx;
								width: auto;
								display: flex;
								flex-direction: column;
								margin-top: 10rpx;
								text{
									font-size: 20rpx;
									font-weight: 500;
									letter-spacing: 0px;
									line-height: 20rpx;
									color: rgba(33, 37, 41, 1);
									text-align: center;
									margin-top: 10rpx;
								}
								.number{
									font-size: 30rpx;
									font-weight: 700;
									letter-spacing: 0px;
									line-height: 40rpx;
									color: rgba(0, 0, 0, 1);
									margin: auto;
								}
							}
						}
						.bottom{
							width: 490rpx;
							height: 45rpx;
							display: flex;
							margin: 20rpx 30rpx 0 30rpx;
							text{
								width: 140rpx;
								height: 40rpx;
								font-size: 20rpx;
								font-weight: 700;
								letter-spacing: 0px;
								line-height: 20rpx;
								color: rgba(0, 0, 0, 1);
								margin : 10rpx 0 0 16rpx;
								display: flex;
								text-align: center;
								align-items: center; 
								justify-content: center;
							}
							.selectStatus{
								color: rgba(255, 255, 255, 1);
								border-radius: 5px;
								background: rgba(66, 65, 65, 1);
							}
						}
					}
					.info-two{
						margin-top: 30rpx;
						height: 460rpx;
						border-radius: 0px 10px 10px 10px;
						background: rgba(255, 255, 255, 1);
						border: 1px solid rgba(0, 0, 0, 1);
						.opinion{
							display: flex;
							height: 400rpx;
							margin: 40rpx 40rpx 15rpx 40rpx;
							swiper{
								height: 400rpx;
								.swiper-item{
									height: 400rpx;
									display: flex;
									flex-direction: column;
									.top{
										height: 40rpx;
										display: flex;
										justify-content: space-between;
										text-align: center;
										text{
											font-size: 30rpx;
											font-weight: 700;
											letter-spacing: 0px;
											line-height: 30rpx;
											color: rgba(0, 0, 0, 1);
										}
										.top_right{
											width: 250rpx;
											height: 45rpx;
											border-radius: 10px;
											border: 0.8px solid rgba(0, 0, 0, 1);
											display: flex;
											justify-content: space-evenly;
											text-align: center;
											align-items: center;
											text{
												font-size: 20rpx;
												font-weight: 700;
												letter-spacing: 0px;
												line-height: 25rpx;
												color: rgba(66, 65, 65, 1);
											}
										}
									}
									.bottom{
										margin-top: 15rpx;
										display: flex;
										flex-direction: column;
										text{
											margin-left: 0.01rem;
											font-size: 28rpx;
											font-weight: 400;
											letter-spacing: 0px;
											line-height: 33rpx;
											color: rgba(0, 0, 0, 1);
										}
										.img{
											display: flex;
											justify-content: space-around;
											margin-top: 20rpx;
											image{
												width: 130rpx;
												height: 80rpx;
												border-radius: 5px;
											}
										}
									}
								}
							}
						}
					}
				}
			}
		}
		
		.mask2{
			position: fixed;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			z-index: 1;
			//背景模糊
			backdrop-filter: blur(2px);
			.mask-con {
				position: fixed;
				top: 300px;
				bottom: 0;
				left: 47px;
				right: 0;
				z-index: 1;
				width: 290px;
				height: 380px;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: center;
				border-radius: 20px;
				background: rgba(255, 255, 255, 1);
				border-width: 1px 1px 0px 1px;
				border-style: solid;
				border-color: rgba(0, 0, 0, 1);
				.info-top{
					width: 450rpx;
					height: 650rpx;
					padding-top: 20rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					.info_select{
						width: 400rpx;
						height: 50rpx;
						border-radius: 10px;
						border: 1px solid rgba(82, 80, 80, 1);
						display: flex;
						justify-content: center;
						align-items: center;
						.active{
							background: rgba(255, 146, 43, 1);
							color: #FFFFFF;
						}
						.infoselect{
							width: 70px;
							height: 17px;
							border-radius: 5px;
							display: flex;
							justify-content: center;
							align-items: center;
							font-size: 14px;
							font-weight: 700;
							letter-spacing: 0px;
							line-height: 14.48px;
						}

					}
					.success,.request{
						height: 550rpx;
						width: 100%;
						padding-top: 30rpx;
						.uni-swiper-tab{
							white-space: nowrap;
						}
						.scrollx_items{
							overflow: hidden;
							text-overflow: ellipsis;
							word-wrap: break-word;
							white-space: normal !important;
							-webkit-line-clamp: 2;
							-webkit-box-orient: vertical;
							display: flex;
							flex-direction: column;
							padding-top: 10rpx;
							height: 160rpx;
							.top{
								display: flex;
								justify-content: space-between;
								height: 40rpx;
								image{
									width: 30rpx;
								}
								text{
									padding-left: 20rpx;
									font-size: 30rpx;
									font-weight: 400;
									letter-spacing: 0px;
									line-height: 30rpx;
									color: rgba(66, 65, 65, 1);
									text-align: left;
									vertical-align: top;
								}
							}
							.bottom{
								display: flex;
								flex-direction: column;
								justify-content: space-around;
								height: 100rpx;
								image{
									width: 60rpx;
									height: 60rpx;
								}
								.name{
									padding-left: 10rpx;
									font-size: 30rpx;
									font-weight: 700;
									letter-spacing: 0px;
									line-height: 70rpx;
									color: rgba(33, 37, 41, 1);
									text-align: center;
								}
								.distance{
									padding-left: 10rpx;
									font-size: 20rpx;
									font-weight: 400;
									letter-spacing: 0px;
									line-height: 75rpx;
									color: rgba(0, 0, 0, 1);
								}
								.time{
									font-size: 25rpx;
									font-weight: 700;
									letter-spacing: 0px;
									line-height: 25rpx;
									color: rgba(33, 37, 41, 0.8);
									display: flex;
									flex-direction: column;
									padding-left: 25rpx;
									.time1{
										font-size: 25rpx;
										font-weight: 700;
										letter-spacing: 0px;
										line-height: 25rpx;
										color: rgba(217, 72, 15, 1);
									}
									.time2{
										padding-top: 5rpx;
										font-size: 25rpx;
										font-weight: 400;
										letter-spacing: 0px;
										line-height: 25rpx;
										color: rgba(33, 37, 41, 0.8);
									}
								}
							}
						}
						
						.small{
							height: 40rpx;
						}
					}
				}
				.info-bottom{
					width: 400rpx;
					height: 60rpx;
					display: flex;
					justify-content: right;
					align-items: flex-start;
					text{
						width: 172px;
						height: 16px;
						font-size: 12px;
						font-weight: 400;
						letter-spacing: 0px;
						line-height: 17.38px;
						color: rgba(0, 0, 0, 1);
					}
					image{
						width: 24px;
						height: 24px;
					}
				}
			
			}
		}
	
		.mask3{
			position: fixed;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			z-index: 1;
			//背景模糊
			backdrop-filter: blur(4px);
			.mask-con {
				position: fixed;
				top: 80rpx;
				z-index: 1;
				width: 100%;
				// height: 100%;
				height: 100rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				.mask-main{
					width: 550rpx;
					height: 800rpx;
				}
				.info{
					height:auto;
					padding-bottom: 30rpx;
				}
				.active{
					border-radius: 40rpx;
					background: rgba(255, 255, 255, 1);
				}
				.info-main{
					height:auto;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					border-radius: 40rpx;
					border-width: 2rpx;
					border-style: solid;
					border-color: rgba(0, 0, 0, 1);
					.one{
						height: 177rpx;
						display:flex; 
						flex-direction: column;
						vertical-align: center;
						align-items: center;
						justify-content: center;
						.route,.distance,.time{
							color: rgba(33, 37, 41, 1);
							text-align: center;
							vertical-align: center;
						}
						.route{
							font-size: 45rpx;
							font-weight: 700;
							line-height: 65rpx;
						}
						.distance,.time{
							font-size: 40rpx;
							font-weight: 500;
							line-height: 65rpx;
						}
					}
					.active{
						background-color: rgba(52, 58, 64, 1);
						text{
							color: rgba(255, 255, 255, 1);
						}
					}
					.two{
						display: flex;
						width: 350rpx;
						height: 70rpx;
						justify-content: center;
						.two-imp{
							width: 1rem;
							display: flex;
							justify-content: center;
							align-items: center;
							.two-main{
								width: 50rpx;
								height: 50rpx;
								border-radius: 100px;
								border: 1px solid rgba(66, 65, 65, 1);
								display: flex;
								justify-content: center;
								align-items: center;
							}
							image{
								width: 30rpx;
								height: 30rpx;
								padding-left: 10rpx;
							}
						}
						
					}
					.three{
						height: 140rpx;
						.three-main{
							display: flex;
							justify-content: center;
							image{
								width: 120rpx;
								height: 120rpx;
								border-radius: 10px;
								border: 1px solid rgba(0, 0, 0, 1);
							}
							.three-mid{
								display: flex;
								flex-direction: column;
								justify-content: space-around;	
								padding: 0 20rpx 0 20rpx;
								.top{
									font-size: 35rpx;
									font-weight: 700;
									letter-spacing: 0px;
									line-height: 35rpx;
								}
								.bottom{
									font-size: 25rpx;
									font-weight: 400;
									letter-spacing: 0px;
									line-height: 30rpx;
								}
							}
							.three-right{
								display: flex;
								justify-content: center;
								align-items: center;
								font-size: 30rpx;
								font-weight: 700;
								letter-spacing: 0px;
								line-height: 35rpx;
							}
						}
						
					}
				}
			}
		}
		
	
	}




</style>
